<template>
  <confirm-dialog
    to="#dynamic"
    :title="title"
    :confirm-text="confirmText"
    v-model="showConfirm"
    width="65%"
    :isLoading="isLoading"
    oneButton
    @confirm="confirm"
  >
    <el-input
      ref="textareaRef"
      type="textarea"
      :disabled="isLoading"
      resize="none"
      :autosize="{ minRows: 4, maxRows: 4 }"
      class="comment-input"
      v-model="editContent"
      placeholder="请输入内容"
      maxlength="1000"
      @keypress.enter.prevent="confirm"
    />
    <div class="comment-emotions">
      <emotions
        :textarea-ele="($refs.textareaRef as any)"
        @update-content="updateContent"
        :disabled="isLoading"
        placement="bottom"
        :count="1000"
      ></emotions>
    </div>
  </confirm-dialog>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue";
import emotions from "../header/createDynamic/toolbar.vue";
import { ElMessage } from "element-plus";
import { useDynamicPinia } from "@/pinia/dynamic";
import confirmDialog from "@/components/confirmDialog.vue";

const props = withDefaults(
  defineProps<{
    modelValue: boolean;
    to?: string;
    title: string;
    confirmText?: string;
    dynamicId: string;
    commentId?: string;
    commenter: {
      userId: string;
      remark: string;
    };
    commenteder?: {
      userId: string;
      remark: string;
    };
  }>(),
  {
    to: "#dynamic",
    confirmText: "评论",
  }
);

const emits = defineEmits<{
  (e: "update:modelValue", show: boolean): void;
  (
    e: "comment",
    payload: {
      info: DynamicCommenter & { commentContent: string };
      commentId: string;
      dynamicId: string;
    }
  ): void;
}>();

const dynamicStore = useDynamicPinia();

/**
 * 输入框组件
 */
const textareaRef = ref<any>();
/**
 * 是否显示该组件
 */
const showConfirm = ref<boolean>(false);

watch(
  () => props.modelValue,
  (newValue) => {
    showConfirm.value = newValue;
    newValue ? setTimeout(() => textareaRef.value.focus()) : (editContent.value = "");
  }
);

watch(
  () => showConfirm.value,
  (newValue) => emits("update:modelValue", newValue)
);

/**
 * 正在发送评论
 */
const isLoading = ref<boolean>(false);
/**
 * 所评论或者回复的内容
 */
const editContent = ref<string>("");

// 是否更新编辑的内容(往往是执行了插入表情操作)
const updateContent = (payload: { isModify: boolean; content?: string }) =>
  payload.isModify ? (editContent.value = payload.content!) : undefined;

// 开始发表评论
const confirm = () => {
  if (editContent.value) {
    isLoading.value = true;
    dynamicStore
      .commentDynamic(
        {
          dynamicId: props.dynamicId,
          commentId: props.commentId,
        },
        {
          commenter: props.commenter,
          commenteder: props.commenteder,
          commentContent: editContent.value,
        }
      )
      .then((data) => {
        isLoading.value = false;
        if (data.code === 1) {
          const commentContent: string = editContent.value;
          emits("update:modelValue", false);
          // 当该用户是在好友动态里面评论时添加评论
          emits("comment", {
            info: {
              commenter: props.commenter,
              commenteder: props.commenteder,
              commentContent,
            },
            dynamicId: props.dynamicId,
            commentId: data.commentId,
          });
        } else {
          ElMessage({
            type: "error",
            message: "操作失败",
            duration: 1500,
          });
          textareaRef.value.focus();
        }
      })
      .catch(() => {
        isLoading.value = false;
        ElMessage({
          type: "error",
          message: "操作失败",
          duration: 1500,
        });
        textareaRef.value.focus();
      });
  } else {
    ElMessage({
      type: "warning",
      message: "输入的内容不能为空",
      duration: 1500,
    });
    textareaRef.value.focus();
  }
};
</script>

<style lang="scss" scoped>
.comment {
  &-input {
    width: 85%;

    :deep(.el-textarea__inner) {
      @include scrollBar;
    }
  }

  &-emotions {
    margin: 10px auto -10px;
    width: 85%;
    text-align: left;
  }
}
</style>
